<template>
  <div class="imgshop">
    <div class="contentBox">
      <div class="herdertop">
        <img src="../../assets/top.png" alt="" class="topImg" />
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
          <el-breadcrumb-item>图片素材</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="imgBox">
        <div class="top1">
          <div class="top1Title">图片素材库</div>
          <div class="top1Bottom">
            <div class="bottomLeft">
              <span>分组</span>
              <el-select
                v-model="imgGroupId"
                placeholder="请选择"
                style="width:150px;"
                @change="changeSelect"
              >
                <el-option
                  v-for="item in zoomoptions"
                  :key="item.imgGroupId"
                  :label="item.imgGroupName"
                  :value="item.imgGroupId"
                >
                </el-option>
              </el-select>
            </div>
            <div class="bottomRight">
              <el-button type="warning" @click="showUpLoadImgDialog = true"
                >上传</el-button
              >
              <el-button type="warning" @click="showAddZoomDialog = true"
                >新建分组</el-button
              >
              <el-button type="warning" @click="showTableDialog = true"
                >管理</el-button
              >
            </div>
          </div>
        </div>
        <div class="btns">
          <div style="font-size:14px;">
            {{
              multipleSelection.length > 0
                ? `选中${multipleSelection.length}个`
                : ""
            }}
          </div>
          <div>
            <el-button
              style="background-color:#fd804c;color: #fff;"
              :disabled="isdisabled"
              @click="deleteAll"
              >批量删除</el-button
            >
            <el-button
              style="background-color:#fd804c;color: #fff;"
              :disabled="isdisabled"
              @click="dialogVisibleMove = true"
              >批量移动</el-button
            >
          </div>
        </div>
        <div class="table">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="图片" width="120">
              <template slot-scope="scope">
                <img :src="scope.row.imgUrl" class="img" />
              </template>
            </el-table-column>
            <el-table-column
              prop="imgName"
              label="图片名称"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          class="pagination"
        >
        </el-pagination>
        <el-dialog
          title="批量移动"
          :visible.sync="dialogVisibleMove"
          width="30%"
        >
          <span style="color:red;">*</span>
          <span>分组</span>
          <el-select v-model="imgGroupIdDialog" placeholder="请选择分组">
            <el-option
              v-for="item in zoomoptionsDialog"
              :key="item.imgGroupId"
              :label="item.imgGroupName"
              :value="item.imgGroupId"
            >
            </el-option>
          </el-select>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleMove = false">取 消</el-button>
            <el-button
              style="background-color:#fd804c;color: #fff;"
              @click="moveAll"
              >提 交</el-button
            >
          </span>
        </el-dialog>
        <dialog-upload
          :isshow="showUpLoadImgDialog"
          :imgGroupId="imgGroupId"
          @changeShowImgDialog="changeShowImgDialog"
        ></dialog-upload>
        <dialog-add-zoom
          :isshow="showAddZoomDialog"
          @changeShowAddZoomDialog="changeShowAddZoomDialog"
        ></dialog-add-zoom>
        <dialog-table
          :isshow="showTableDialog"
          @changeTableDialog="changeTableDialog"
        ></dialog-table>
      </div>
    </div>
  </div>
</template>

<script>
import DialogAddZoom from "./dialogAddZoom.vue";
import DialogTable from "./dialogTable.vue";
import dialogUpload from "./dialogUpload.vue";
export default {
  components: { dialogUpload, DialogAddZoom, DialogTable },
  data() {
    return {
      imgGroupId: "",
      zoomoptions: [],
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
      isdisabled: true,
      dialogVisibleMove: false,
      imgGroupIdDialog: "",
      zoomoptionsDialog: [],
      showUpLoadImgDialog: false,
      showAddZoomDialog: false,
      showTableDialog: false
    };
  },
  activated() {
    // 获取分组列表
    this.$http({
      url:
        "/cmsadmin/index/materialLibrary/fetchMaterialLibraryGroupListNoPage",
      method: "get"
    }).then(res => {
      this.zoomoptions = res;
      this.zoomoptions = [
        {
          imgGroupId: "",
          imgGroupName: "所有图片"
        },
        ...this.zoomoptions
      ];
      this.zoomoptionsDialog = res;
    });
    // 获取表格数据
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.$http({
        url: "/cmsadmin/index/materialLibrary/fetchMaterialLibraryList",
        method: "get",
        params: {
          page: this.currentPage,
          size: this.pageSize,
          imgGroupId: this.imgGroupId
        }
      }).then(res => {
        const { list, pageSize, pageNum, total } = res;
        if (list.length >= 0) {
          this.tableData = list;
        }
        this.pageSize = pageSize;
        this.currentPage = pageNum;
        this.total = total;
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length > 0) {
        this.isdisabled = false;
      } else {
        this.isdisabled = true;
      }
    },
    handleCurrentChange(val) {
      // 改变页码
      this.currentPage = val;
      this.getTableData();
      this.isdisabled = true;
    },
    changeSelect() {
      this.getTableData();
    },
    async deleteAll() {
      // 批量删除
      const reqData = {
        imgIds: []
      };
      this.multipleSelection.forEach(item => {
        if (item.id) {
          reqData.imgIds.push(item.id);
        }
      });
      this.$confirm("是否批量删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: "/cmsadmin/index/materialLibrary/deleteMaterialLibrary",
            method: "POST",
            data: reqData
          })
            .then(res => {
              this.$message.success("批量删除成功");
              this.$router.go(0);
            })
            .catch(err => {
              this.$message.success("批量删除失败，请稍后重试");
            });
        })
        .catch(() => {
          this.$message.success("批量删除取消");
        });
    },
    async moveAll() {
      if (!this.imgGroupIdDialog) {
        this.$message.error("请选择分组");
        return false;
      }
      let data = {
        imgGroupId: this.imgGroupIdDialog,
        imgIds: []
      };
      this.multipleSelection.forEach(item => {
        if (item.id) {
          data.imgIds.push(item.id);
        }
      });
      await this.$http({
        url: "/cmsadmin/index/materialLibrary/updateMaterialGroup",
        method: "POST",
        data
      })
        .then(res => {
          this.$message.success("批量移动成功");
          this.dialogVisibleMove = false;
          setTimeout(() => {
            this.$router.go(0);
          }, 1500);
        })
        .catch(err => {
          this.$message.error("批量移动失败");
          this.dialogVisibleMove = false;
          setTimeout(() => {
            this.$router.go(0);
          }, 1500);
        });
    },
    changeShowImgDialog(value) {
      this.showUpLoadImgDialog = value;
    },
    changeShowAddZoomDialog(value) {
      this.showAddZoomDialog = value;
    },
    changeTableDialog(value) {
      this.showTableDialog = value;
    }
  }
};
</script>

<style lang="scss" scoped>
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  .topImg {
    margin-right: 20px;
  }
}
.top1Bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px 10px 32px;
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
}
.contentBox {
  margin: 20px;
  border: 10px solid #ebeef1;
  border-radius: 10px;
  .imgBox {
    .top1 {
      .top1Title {
        height: 56px;
        line-height: 56px;
        font-size: 20px;
        padding: 0 32px;
        font-weight: 700;
      }
    }
    .btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 32px 10px 32px;
      border-bottom: 1px solid #ebeef5;
    }
  }
}
</style>
<style lang="scss" scoped>
/deep/ .el-button--warning {
  background-color: rgb(255, 151, 72);
  border-color: rgb(255, 151, 72);
}
/deep/ .el-button {
  padding-top: 7px;
  padding-bottom: 7px;
}
.img {
  width: 70px;
  height: 40px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 15px 15px 0;
}
/deep/ .el-select {
  height: 30px;
  .el-input--suffix {
    height: 30px;
    .el-input__icon {
      line-height: 30px;
    }
    .el-input__inner {
      height: 30px;
    }
  }
}
/deep/ .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>
